<template>
    <el-form :model="problemForm" label-width="auto" class="problem-form">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="通知单号:">
                    {{ problemForm.noticeCode }}
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="油库名称:">
                    {{ problemForm.name }}
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="检查类型:">
                    {{ problemForm.checkType }}
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="问题级别:">
                    {{ problemForm.level }}
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="责任分组:">
                    {{ problemForm.dutyGroup }}
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="问题类别:">
                    {{ problemForm.problemCategorize }}
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="考核月份:">
                    {{ problemForm.month }}
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="存在问题:">
                    {{ problemForm.problem }}
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="整改期限:">
                    {{ problemForm.correctionPeriod }}
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="状态:">
                    {{ problemForm.status }}
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="创建人:">
                    {{ problemForm.createdBy }}
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="创建日期:">
                    {{ problemForm.createdDate }}
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// import { getDetail } from '@/api/index.ts';
interface ProblemFormType {
    noticeCode?: string,
    name?: string,
    checkType?: string,
    level?: string,
    dutyGroup?: string,
    problemCategorize?: string,
    month?: string,
    problem?: string,
    correctionPeriod?: string,
    createdBy?: string,
    createdDate?: string,
    status?: string,
    remark?: string,
    id?: number,
}
const problemForm = reactive<ProblemFormType>({
    noticeCode: 'CFC-2023-001',
    name: '张三',
    checkType: '日常检查',
    level: '一般',
    dutyGroup: '生产部',
    problemCategorize: '设备故障',
    month: '2023-01',
    problem: '设备A出现故障，无法正常工作',
    correctionPeriod: '2023-01-10',
    createdBy: '李四',
    createdDate: '2023-01-01',
    status: '待整改',
    remark: '无',
    id: 1
})

// 主键
const id = ref<string>('');
const route = useRoute();

onMounted(() => {

    id.value = route.query.id as string

    // 实际数据请求
    if (id.value) {
        // getDetail(id.value).then(res=>{
        //     problemForm = Object.assign(problemForm, res.data)
        // })
    }
})

</script>

<style scoped lang="scss">
.problem-form {
    padding: 30px 0;
    width: 70%;
    margin: 0 auto;
}

:deep(.el-form-item__content) {
    font-size: 26px;
}

:deep(.el-form-item__label) {
    font-size: 24px;
}
</style>